<template>
	<div class="generate_video">
		<a-button v-if="!hasDone" :loading="loading"
			style="background: rgba(255, 255, 255, 0.2); color: #fff; border: none"
			@click="generateThis">生成预览</a-button>

		<video v-if="hasDone && edit_model != 5" controls class="video"
			:src="crtShowVideo?.target_url || crtShowVideo?.origin_url"
			:poster="crtShowVideo?.poster_url || crtShowVideo?.poster" preload="metadata" ref="videoRef"
			controlsList="nodownload" disablePictureInPicture></video>

		<swiperCom :crtShowVideo="crtShowVideo" v-if="hasDone && edit_model == 5 && refrashSwiper" />
	</div>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		nextTick,
		computed,
		watch,
		onBeforeUnmount,
		onMounted
	} from "vue";
	import request from "../../../../../common/utils/request";
	import {
		useTimeoutPoll
	} from "@vueuse/core";
	import {
		useStore
	} from "vuex";
	import {
		message
	} from "ant-design-vue";
	import swiperCom from './swiperCom.vue';
	export default defineComponent({
		components: {
			swiperCom
		},
		setup(props, context) {
			const state = reactive({
				loading: false,
				hasDone: false,
				refrashSwiper: true
			});

			const videoRef = ref(null);
			const store = useStore();
			const crtShowVideo = computed(() => store.getters.crtShowVideo);
			const edit_model = computed(() => store.getters.clipJSON?.edit_model);

			watch(
				() => store.getters.clipJSON,
				() => {
					if (state.hasDone) {
						state.hasDone = false;
						store.dispatch("SetCrtShowVideoList", []);
						store.dispatch("SetCrtShowVideo", {});
					}
				}, {
					deep: true
				}
			);

			watch(
				() => store.getters.crtShowVideo,
				(val, oldVal) => {
					if (val?.id) {
						state.hasDone = true;
					}
					if (val?.id !== oldVal?.id && edit_model.value != 5) {
						videoRef.value?.load();
					}
					if (edit_model.value == 5) {
						state.refrashSwiper = false
						nextTick(() => {
							state.refrashSwiper = true
						})
					}
				}, {
					deep: true
				}
			);

			watch(
				() => state.loading,
				(val) => {
					store.dispatch("SetGenerateLoading", val);
				}, {
					immediate: true
				}
			);

			const getGeneratePreviewOld = () => {
				request
					.get("work_ai", "/user/shotstack/clip/response/list", {
						editing_record_id: store.getters.clipJSON.id,
						edit_model: edit_model.value,
						page: 1,
						pageSize: 20,
					})
					.then((res) => {
						if (
							res?.result?.every(
								(i) => i.status !== null && i.status !== "rendering"
							)
						) {
							state.loading = false;
							state.hasDone = true;
							pause();
							let list = []
							if (edit_model.value == 5) {
								list = res?.result;
							} else {
								list = res?.result?.filter((i) => i.status === "done");
							}
							store.dispatch("SetCrtShowVideoList", list);
							if (list?.[0]) {
								store.dispatch("SetCrtShowVideo", list?.[0]);
							}
						}

						let list = [];
						if (edit_model.value == 5) {
							list = res?.result;
						} else {
							list = res?.result?.filter((i) => i.status === "done");
						}
						store.dispatch("SetCrtShowVideoList", list);
						if (list?.[0]) {
							store.dispatch("SetCrtShowVideo", list?.[0]);
						}
					})
					.catch(() => {
						state.loading = false;
						pause();
					});
			};

			const getGeneratePreview = () => {
				request
					.get("work_ai", "/user/shotstack/clip/response/list", {
						editing_record_id: store.getters.clipJSON.id,
						edit_model: edit_model.value,
					})
					.then((res) => {
						if (res?.is_all_done) {
							state.loading = false;
							state.hasDone = true;
							pause();
							let list = []
							if (edit_model.value == 5) {
								list = res?.result?.data;
							} else {
								list = res?.result?.data?.filter((i) => i.status === "done");
							}
							store.dispatch("SetCrtShowVideoList", list);
							if (list?.[0]) {
								if (!crtShowVideo.value?.id) {
									store.dispatch("SetCrtShowVideo", list?.[0]);
								}
							}
							return;
						}

						let list = [];
						if (edit_model.value == 5) {
							list = res?.result?.data;
						} else {
							list = res?.result?.data?.filter((i) => i.status === "done");
						}
						store.dispatch("SetCrtShowVideoList", list);
						if (list?.[0]) {
							if (!crtShowVideo.value?.id) {
								store.dispatch("SetCrtShowVideo", list?.[0]);
							}
						}
					})
					.catch(() => {
						state.loading = false;
						pause();
					});
			};

			const {
				pause,
				resume
			} = useTimeoutPoll(getGeneratePreview, 2500);

			watch(
				() => store.getters.clipJSON.response?.length,
				(val) => {
					if (val > 0) {
						state.loading = true;
						if (
							store.getters.clipJSON.response?.some(
								(i) => i == null || i === "rendering"
							)
						) {
							resume();
						} else {
							state.loading = false;
						}
					}
				}
			);

			const generateThis = () => {
				// console.log(store.getters.clipJSON, '请求数据');
				state.loading = true;
				if (
					store.getters.clipJSON.resource_data?.find((i) => i.video?.length === 0)
				) {
					message.error("没有素材，请先选择或拖入素材");
					state.loading = false;
					return;
				}

				let postUrl = "/user/shotstack/clip/samrt/preview";
				if (edit_model.value == 5) {
					postUrl = "/user/shotstack/clip/image_text";
				} else if (edit_model.value == 3){
					postUrl = '/user/shotstack/clip/template/preview';
				}

				request
					.post("work_ai", postUrl, {
						...store.getters.clipJSON,
						resource_data: store.getters.clipJSON.resource_data.map(
							(item, index) => ({
								...item,
								sn: index + 1,
							})
						),
					})
					.then((res) => {
						console.log(res,'视频预览');
						setTimeout(() => {
							// testVideo()
							resume();
						}, 1000);
					})
					.catch(() => {
						state.loading = false;
					});
			};

			// const testVideo = async ()=>{
			// 	const res = await request.post(`/user/shotstack/video/status/byid`,{
			// 		editId:'7',
			// 		highQuality:'0'
			// 	})
			// 	console.log(res,'预览视频');
			// }

			onBeforeUnmount(() => {
				store.dispatch("SetGenerateLoading", false);
			});

			return {
				...toRefs(state),
				generateThis,
				// testVideo,
				crtShowVideo,
				videoRef,
				edit_model
			};
		},
	});
</script>

<style lang="less" scoped>
	.generate_video {
		width: 100%;
		height: 100%;
		background: #111111;
		display: flex;
		align-items: center;
		justify-content: center;

		.video {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
</style>